// --------------------------------------------------
// @Desc 进度圈
// @Author: steven.wjx
// @Date:   2020-03-05 13:17:50
// --------------------------------------------------
.#{$ui-name}progress {
	margin-right: 10px;
	margin-bottom: 10px;

	.#{$ui-name}progress-text {
		@include inline-block;
		white-space: nowrap;
		word-break: normal;
		text-align: left;
		font-style: ceil($font-size*0.9);

		.hiicon {
			font-size: ceil($font-size*1.56);

			&.hiicon-check-circle-fill {
				color: $success-color;
			}

			&.hiicon-close-circle-fill {
				color: $danger-color;
			}
		}
	}

	.#{$ui-name}progress-outer {
		@include inline-block;
		width: 100%;
		min-width: 100%;

		.#{$ui-name}progress-inner {
			@include inline-block;
			width: 100%;
			min-height: 8px;
			border-radius: 4px;
			background-color: $border-color;

			.#{$ui-name}progress-bg {
				background-color: $primary-color;
				min-height: 8px;
				border-radius: 4px;
				transition: all .4s ease;
			}
		}
	}

	&.#{$ui-name}progress-has-text {
		position: relative;
		padding-right: 40px;

		.#{$ui-name}progress-text {
			position: absolute;
			top: 0;
			right: 0;
		}
	}

	&.#{$ui-name}progress-inside {
		.#{$ui-name}progress-outer {
			.#{$ui-name}progress-inner {
				border-radius: floor($font-size*0.78);

				.#{$ui-name}progress-bg {
					position: relative;
					min-height: ceil($font-size*1.4);
					border-radius: floor($font-size*0.78);

					.#{$ui-name}progress-text {
						position: absolute;
						top: 0;
						right: 5px;
						font-size: ceil($font-size*0.9);
						line-height: ceil($font-size*1.4);
						color: #fff;
					}
				}
			}
		}
	}

	&.#{$ui-name}progress-circle {
		@include inline-block;

		.#{$ui-name}progress-outer {
			width: auto;
			min-width: inherit;
			border-radius: 50%;

			.#{$ui-name}progress-inner {
				position: relative;
				width: 120px;
				height: 120px;
				border-radius: 50%;
				background-color: transparent;

				.#{$ui-name}progress-circle-svg {
					overflow: hidden;

					.#{$ui-name}progress-circle-trail {
						stroke: $border-color;
					}

					.#{$ui-name}progress-circle-path {
						stroke: $primary-color;
					}

					.#{$ui-name}progress-circle-path-success {
						stroke: $success-color;
					}

					.#{$ui-name}progress-circle-path-danger {
						stroke: $danger-color;
					}
				}

				.#{$ui-name}progress-text {
					position: absolute;
					top: 0;
					left: 0;
					width: 120px;
					height: 120px;
					line-height: 120px;
					text-align: center;
					font-size: 20px;

					.hiicon {
						font-size: 40px;
					}

					.hiicon-check {
						color: $success-color;
					}

					.hiicon-close {
						color: $danger-color;
					}
				}
			}
		}
	}
}